<template>
	<div class="marquee">
		<div></div>
		<div class="marquee_box">
			<ul class="marquee_list" :class="{marquee_top:animate}">
				<li v-for="(item, index) in mapdata" :key="index"
					:style="{background: item.background, display: 'flex', 'justify-content': 'space-between',  'align-items': 'center'}">
					<span>
						<img :src="item.src" style="height:30px;" >
					</span>
					<span style="color: #F0F8FF; width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"><p style=" text-align: center;width: 100%;">{{item.name}}</p></span>
					
					<span class="red" v-if="isAll==undefind || isAll == '' "> {{item.date}}</span>
					<span class="red" v-if="isAll!=undefind && isAll != '' &&item.type==0"> 北约</span>
					<span class="red" v-if="isAll!=undefind && isAll != '' &&item.type==1"> 华约</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			mapdata:Array,
			isAll:Number
		},
		data() {
			return {
				rank:"1",
				animate: false,
				marqueeList: [{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/USSR.png",
				    name:'苏维埃社会主义共和国联盟',
					date:'初始成员国'
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/DDR.png",
					name:'德意志民主共和国',
					date:'初始成员国'
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRL.png",
					name:'波兰人民共和国',
					date:'初始成员国',
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/CSSR.png",
					name:'捷克斯洛伐克社会主义共和国',
					date:'初始成员国'
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRH.png",
					name:'匈牙利人民共和国',
					date:'初始成员国'
				},
				{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/SRR.png",
					name:'罗马尼亚社会主义共和国',
					date:'初始成员国'
				},{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/PRB.png",
					name:'保加利亚人民共和国',
					date:'初始成员国'
				},{
					src:"https://xiashilong-file.oss-cn-hangzhou.aliyuncs.com/countryflag/RPSS.png",
					name:'阿尔巴尼亚人民共和国',
					date:'初始成员国'
				}
			]
		}
	},
	created: function() {
			setInterval(this.showMarquee, 2000);
		},
		methods: {
			showMarquee: function() {
				this.animate = true;
				setTimeout(() => {
					this.mapdata.push(this.mapdata[0]);
					this.mapdata.shift();
					this.animate = false;
				}, 500);
			}
		}
	}
</script>

<style scoped="scoped">
	div,
	ul,
	li,
	span,
	img {
		margin: 0;
		padding: 0;
		display: flex;
		box-sizing: border-box;
	}

	.marquee {
		width: 100%;
		height: 100%;
		color: #3a3a3a;
		box-sizing: border-box;
	}

	.marquee_box {
		display: flex;
		width: 100%;
		height: 300px;
		padding: 0px 10px;
		overflow: hidden;
	}

	.marquee_list {
		display: block;
		width: 100%;
	}

	.marquee_top {
		transition: all 0.5s ease-out;
		margin-top: -50px;
	}

	.marquee_list li {
		height: 50px;
		line-height: 30px;
		font-size: 14px;
		padding-left: 10px;
	}

	.marquee_list li span {
		padding: 0 2px;
	}

	.red {
		color: #ff0101;
	}
</style>
